<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧2</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            /*使用固定定位，紧贴着html的4个边，就可以与整个页面窗口一样大*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<!--遮罩层-->
<div class="mask"></div>

<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, amet, assumenda corporis cumque eligendi
        excepturi hic in iure minima, officia provident temporibus unde voluptatem? Debitis doloribus dolorum harum
        natus nulla.
    </div>
    <div>Consectetur enim illo inventore quam quo ullam vel! Ab assumenda consectetur deserunt dicta, dolorem eligendi
        eveniet explicabo fugiat iste labore magnam nam nisi obcaecati porro quaerat qui repellat tempore, ullam.
    </div>
    <div>Adipisci amet blanditiis commodi dolor est expedita incidunt iusto laudantium nihil numquam, perferendis, quasi
        qui quo sint, totam. Assumenda delectus, deserunt in ipsum nemo quae quisquam repellendus tempora velit
        voluptates?
    </div>
    <div>Est facere nam odio rem? Ad alias, aut cum cumque deleniti hic id ipsa, itaque iure iusto maiores, maxime nam
        quam quas quo quod ratione similique suscipit veniam voluptas voluptatum.
    </div>
    <div>Aperiam atque blanditiis consequuntur, dolore eligendi, esse nam, nemo nisi pariatur provident repellendus
        rerum sapiente suscipit vero voluptatibus. Ad atque dolorum eum eveniet magnam, modi nulla omnis qui ratione
        saepe.
    </div>
    <div>Adipisci expedita, voluptates! A ad animi asperiores aut, beatae corporis cumque doloribus eius exercitationem
        laboriosam maiores modi, natus non nostrum possimus repellat saepe sunt tempore ullam velit veniam voluptas
        voluptatibus!
    </div>
    <div>Delectus dicta dolor est ex quae qui repellat repellendus tenetur. At cupiditate eveniet fuga fugit iste labore
        laudantium, nam nulla optio quaerat quas quidem quisquam repudiandae, similique sit tempora temporibus.
    </div>
    <div>Ad alias assumenda cum cupiditate doloribus illo minus nihil, possimus quae qui similique tempore ullam?
        Asperiores consequatur deleniti, facilis fuga illo odio praesentium quia quo ratione, recusandae, reiciendis
        soluta velit?
    </div>
    <div>Consequatur debitis ducimus itaque quos sint? Atque corporis eligendi eum hic nesciunt obcaecati quis!
        Aspernatur assumenda dignissimos eius enim eos itaque, maiores, nulla numquam quas reprehenderit rerum saepe
        sint. Eligendi!
    </div>
    <div>Aperiam beatae commodi cumque esse exercitationem quae rerum. Distinctio in quae quos. Accusamus, aut cum
        cumque deleniti dolores eos minima molestiae nostrum odit omnis pariatur, quia, sit suscipit tempora velit.
    </div>
    <div>Ab amet autem corporis culpa cum, deserunt, ea earum eveniet ex excepturi illum impedit iusto magnam maiores
        minus nobis nostrum odit porro quaerat recusandae sapiente sed totam ullam unde, voluptatibus.
    </div>
    <div>A accusamus ad aliquid asperiores consectetur cupiditate doloremque eaque eum harum itaque iure iusto
        laboriosam magnam, nemo neque nisi odit, pariatur, perferendis quae quia quod rem repellat saepe? Deserunt, eum!
    </div>
    <div>Amet, atque cum cupiditate deleniti distinctio dolorem doloribus ducimus ea eos error est eum exercitationem
        facere fuga fugiat id ipsa iusto porro provident quas qui reprehenderit sapiente suscipit vel voluptates.
    </div>
    <div>Aliquam animi aperiam, at dicta harum nihil nobis porro quaerat, quas quod rerum temporibus ut, voluptas.
        Architecto dolore dolorem dolorum eveniet neque, nihil nulla officia placeat sequi velit veritatis voluptatum.
    </div>
    <div>Ab atque est eveniet ex iure maiores maxime natus omnis quo, vel. Animi atque, delectus facere inventore minima
        neque perferendis porro rerum! Beatae illo incidunt itaque sed tenetur voluptates voluptatibus.
    </div>
    <div>Beatae distinctio dolorem doloremque dolores, est et ipsam, iure laborum mollitia necessitatibus nemo qui
        repellendus, sed sit tenetur totam voluptate voluptatum? Aperiam architecto aut dolorum? Aliquid harum nesciunt
        tempore temporibus!
    </div>
    <div>Blanditiis magnam modi nemo quae suscipit voluptatibus. Commodi doloribus eaque enim est excepturi hic id illum
        labore laborum, maxime molestiae natus neque recusandae reprehenderit, sunt totam, vel! In, magnam tempora?
    </div>
    <div>A atque aut commodi delectus dolor dolore doloremque est ex explicabo fugiat in minima minus molestias nostrum
        quaerat quam quia, quis quos reprehenderit sint tempore ullam unde, vero voluptate voluptatum?
    </div>
    <div>Asperiores at aut beatae culpa cum ex expedita facilis id ipsa, itaque iusto laborum praesentium quas
        recusandae repellat reprehenderit rerum sint temporibus, tenetur ullam? A cum distinctio excepturi veritatis
        voluptate?
    </div>
    <div>Accusamus amet aspernatur dolores dolorum ea enim eum hic, laboriosam necessitatibus nulla officia optio unde
        vero! Consequuntur eaque et impedit ipsa nesciunt nihil recusandae ut voluptates? Ad fugiat quo voluptatibus.
    </div>
    <div>Beatae ex harum illo porro sit unde! Accusamus aliquam amet consequatur corporis dolorem est explicabo id
        ipsam, nam necessitatibus nemo nesciunt nostrum, perferendis quam quibusdam quod repudiandae rerum similique
        velit.
    </div>
    <div>Accusamus atque autem cupiditate eos esse officiis soluta unde. Adipisci, assumenda dolorem esse ex facilis
        labore minima nisi possimus quam quas quibusdam tenetur vel? Accusamus aliquid dolore eos ratione voluptate!
    </div>
    <div>A error exercitationem expedita ipsum iusto nobis quibusdam reiciendis, repellendus. Asperiores blanditiis,
        cumque, cupiditate delectus dignissimos illo ipsa minus, mollitia nemo nisi nobis quam quas qui repellendus sint
        vero voluptatem.
    </div>
    <div>Aspernatur atque beatae cumque cupiditate deleniti dignissimos dolores ipsa itaque iure laudantium modi
        mollitia necessitatibus nihil nisi pariatur, perspiciatis placeat porro praesentium provident quos totam ut
        velit veniam vitae voluptate?
    </div>
    <div>Autem cumque magni qui quos reprehenderit ullam, vero! Dignissimos dolores dolorum eum explicabo fugiat illo,
        laudantium modi molestiae, quam qui quisquam ratione similique tenetur totam voluptas. Aliquam blanditiis illo
        sed.
    </div>
    <div>Eaque libero nemo numquam placeat ut! A corporis molestiae nihil officiis provident quo tempora veniam? Amet
        harum molestiae possimus soluta velit. Accusantium consequatur doloremque ea iusto nulla omnis qui temporibus?
    </div>
    <div>Atque distinctio ipsa pariatur quidem sapiente. Amet aut debitis deserunt error tempora! Cum cupiditate dolores
        ipsa itaque, iure non numquam officia officiis optio pariatur perspiciatis quaerat quam quia quod repellat.
    </div>
    <div>Iste iure quis recusandae sint tenetur! Accusantium animi aperiam, aspernatur blanditiis ducimus earum, eius
        enim ex fuga id illum, itaque nemo nobis quia quos repellat soluta unde vitae voluptas voluptates.
    </div>
    <div>A ab, asperiores autem, debitis, delectus deleniti distinctio eveniet maxime minima non officia tempora!
        Cupiditate debitis, fugit odio officiis quaerat ratione sint voluptatem! Architecto enim fuga numquam quaerat
        quas quasi.
    </div>
    <div>A, ad alias, commodi delectus dolorem dolores eos eum labore laborum modi nemo nobis nostrum praesentium
        provident quaerat, quas repellat tempore temporibus. Aspernatur assumenda delectus excepturi illum reprehenderit
        saepe tenetur!
    </div>
    <div>A ex impedit labore nobis praesentium, provident reiciendis repellat repellendus. Accusamus aspernatur dolorem
        optio quae temporibus? Accusamus aut explicabo, fugiat fugit harum iste, natus nihil pariatur placeat quia sequi
        sit!
    </div>
    <div>Ab alias dolorum earum libero odio officiis? Aperiam, commodi consequatur dolorum ducimus, iusto maiores nam
        nihil nisi officia quo sint velit, vero voluptatem. Alias architecto cum et sit suscipit veniam.
    </div>
    <div>Blanditiis doloremque doloribus explicabo ipsam molestias quaerat sit voluptas! Accusantium aperiam doloribus
        ex incidunt itaque modi praesentium provident, quia reiciendis reprehenderit. Ab aliquam consectetur
        consequuntur cum magni reprehenderit sed tenetur.
    </div>
    <div>Aperiam debitis earum eligendi itaque maxime nihil nulla porro quam, quasi recusandae reiciendis tempora ullam
        ut! Alias aspernatur, eius enim error est non quae recusandae rem suscipit voluptatibus. Harum, sunt.
    </div>
    <div>Magnam minima quasi rem soluta voluptate. Aspernatur cupiditate, debitis doloremque doloribus, earum
        exercitationem ipsa ipsam labore laboriosam nam perferendis provident quaerat quibusdam rerum similique
        voluptate voluptatum! Ab harum nobis odit.
    </div>
    <div>Deserunt eligendi illum mollitia, possimus repudiandae velit vero! Debitis explicabo hic iste iusto placeat
        porro quas sequi vel, voluptas voluptate. Atque beatae consequatur dolorem ducimus facere, fugit. Et, illo
        necessitatibus?
    </div>
    <div>Assumenda at blanditiis distinctio doloribus facilis fuga odio odit temporibus? Ab, architecto asperiores at
        cumque eaque fugiat itaque, labore magnam minima mollitia, nemo nulla quam quasi ullam ut vitae voluptate?
    </div>
    <div>Alias animi asperiores cum dolorum earum, eius ipsum magnam maxime necessitatibus, nihil numquam, quisquam
        ratione recusandae repellendus repudiandae temporibus vel. Impedit laborum nisi odit quos reprehenderit. Esse
        quae reiciendis temporibus.
    </div>
    <div>Asperiores consequuntur corporis cupiditate debitis dolorem ducimus eligendi, fugiat incidunt ipsam labore
        libero maiores, minima minus nihil numquam placeat porro quam quis quod quos repellendus sapiente sunt ullam ut
        vel?
    </div>
    <div>Accusantium animi, atque aut blanditiis cum deleniti, doloribus ducimus earum error eum eveniet ex facilis fuga
        fugiat hic id itaque obcaecati omnis, porro provident rerum sed tempore tenetur! Eaque, perferendis?
    </div>
    <div>Architecto atque consectetur debitis deserunt eius excepturi fugiat hic ipsum iste itaque labore laborum
        maiores modi, molestias nemo numquam officia optio pariatur placeat porro ratione sed ut voluptatem! Dolores,
        iusto!
    </div>
    <div>Ad alias aliquid architecto aspernatur beatae cupiditate distinctio ea eligendi error et eum excepturi fugiat,
        id maxime minus nihil numquam optio provident quam quia rerum sed sint vitae voluptas voluptate?
    </div>
    <div>Animi assumenda aut autem ducimus ex fugiat illo, laborum magni maiores maxime nam, odio omnis quam quos
        repellendus reprehenderit sunt velit. A alias architecto corporis inventore iusto non quisquam sequi.
    </div>
    <div>Ad architecto debitis iure minima mollitia rem voluptas voluptatem! Consequuntur error modi quibusdam
        reprehenderit veniam! At blanditiis dolorem dolorum, eligendi est illum itaque maxime nihil non ratione soluta
        tempora voluptatem.
    </div>
    <div>Animi architecto aspernatur assumenda corporis debitis dicta eos facere facilis impedit incidunt necessitatibus
        porro quae quisquam, repudiandae sed soluta veniam! Aliquam dolorum eaque magni quis quos reiciendis unde
        voluptatem voluptates?
    </div>
    <div>Aut delectus, deserunt dignissimos dolor dolorem doloremque dolores doloribus ex iusto maiores nam nisi, odit
        praesentium quibusdam quis quisquam quo quod quos reprehenderit saepe sequi similique temporibus tenetur vel
        voluptatum?
    </div>
    <div>Excepturi explicabo iure nam praesentium quae, quod voluptate. A alias aut beatae blanditiis delectus, expedita
        itaque molestiae molestias nulla obcaecati quam voluptas voluptatem! Eum expedita iste laudantium, qui tempore
        vitae.
    </div>
    <div>Aspernatur blanditiis, consectetur dolore eligendi ex harum id, ipsa laboriosam nostrum, provident quasi
        recusandae! Ab blanditiis, eius illo nemo pariatur quas unde vitae. Aliquam culpa nisi, obcaecati optio quo
        quos?
    </div>
    <div>At autem delectus ea earum, impedit maiores minima mollitia natus nisi perspiciatis quos soluta sunt ullam?
        Atque est facilis incidunt magnam. Assumenda commodi, doloribus dolorum eos error molestiae natus nesciunt?
    </div>
    <div>Architecto beatae culpa distinctio dolore suscipit veritatis! Accusantium asperiores dicta doloribus ducimus
        error exercitationem natus provident recusandae tempora veniam? Ad, dicta dolore expedita iste labore magni
        numquam quas tempore vitae.
    </div>
    <div>Aliquam cum cupiditate, dolorum illo impedit in labore maxime nesciunt nulla odit placeat rerum voluptas
        voluptatem. Adipisci ducimus ea eaque, esse libero modi nam perspiciatis quidem sapiente unde vel, vero.
    </div>
    <div>Enim, quam, quo. Ad aliquid dolore doloribus illum nisi reiciendis, similique. Architecto, asperiores at cumque
        dolore ex iusto laborum libero molestiae perspiciatis rerum similique suscipit temporibus? Ab amet eius sunt!
    </div>
    <div>A aut beatae consectetur consequatur dolorem doloremque ea earum et fugiat fugit ipsa itaque libero maiores
        modi nam nesciunt odio optio qui quod, rem, repellat sapiente sequi voluptas, voluptatibus voluptatum.
    </div>
    <div>At corporis excepturi exercitationem harum laborum magni minus tempora! Ad consequatur doloribus eligendi
        facere id incidunt labore laborum libero nesciunt nihil nulla porro, quam quibusdam repudiandae sapiente sed ut
        voluptas.
    </div>
    <div>Accusamus alias aliquam, animi aperiam debitis dignissimos distinctio doloremque eum ex labore, magni maiores
        maxime molestias nesciunt porro praesentium quo quod reiciendis saepe sint tempora tenetur ut vel veniam vitae.
    </div>
    <div>Ad aliquam aperiam assumenda beatae commodi error, est fugiat nemo odio, possimus sint totam ut voluptate!
        Accusantium, aliquam at cum, cupiditate dignissimos doloremque eveniet expedita inventore minima neque porro
        repellendus!
    </div>
    <div>A consequatur dignissimos distinctio dolor eius magnam molestiae quos sequi sint, tenetur totam voluptatem.
        Incidunt, nobis placeat? Dolorum facere quaerat sed. Nihil omnis rem voluptas voluptatem! Animi dolorem totam
        unde!
    </div>
    <div>Consequatur cum dolor eligendi ex officia sunt vero. Aliquam, consequuntur delectus dolorem ea excepturi harum
        hic ipsam molestias nesciunt nulla placeat praesentium, quas ratione reiciendis repellendus sapiente, sit veniam
        veritatis!
    </div>
    <div>Ab aliquid amet aspernatur autem culpa dolorum fugiat itaque, magni nemo quae. Alias dolore eos, est excepturi
        iure placeat quibusdam. Autem dolor error expedita iure laborum pariatur possimus, quis rerum.
    </div>
    <div>Alias, animi architecto assumenda at commodi corporis culpa delectus deleniti deserunt dolores ducimus ea esse
        excepturi facilis harum impedit laudantium libero natus officiis perferendis reiciendis repellat sit soluta
        suscipit veritatis.
    </div>
</div>
</body>
</html>